<template>
  <div class="mt10">
    <app-block>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item prop="name">
          <zm-input
            v-model="searchForm.name"
            placeholder="请输入方案名称搜索"
            class="w200"
          ></zm-input>
        </zm-form-item>
        <zm-form-item prop="exchangeRange">
          <zm-data-select
            v-model="searchForm.exchangeRange"
            :list="PRODUCT_EXCHANGE"
            class="w150"
            clearable
            placeholder="兑换范围"
            multiple
            str
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item prop="type">
          <zm-data-select
            v-model="searchForm.type"
            :list="typeList"
            class="w150"
            clearable
            placeholder="产品类型"
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
      <zm-button type="success" class="mt10 mb10" icon="el-icon-plus" @click="onEdit({})">
        添加
      </zm-button>
      <zm-table-data
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="true"
      >
      </zm-table-data>
    </app-block>
    <!-- 编辑特殊节假日 -->
    <set-special-rule
      v-model="specialRuleParams.visible"
      v-if="specialRuleParams.visible"
      :id="specialRuleParams.id"
      @re-load="loadList"
      :is-plan-config="true"
    ></set-special-rule>
    <!-- 详情 -->
    <detail
      type="specialPrice"
      is-plan-config
      v-model="isShowDetail"
      v-if="isShowDetail"
      :id="detailID"
      :is-show-btn="false"
    ></detail>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import { typeList, columns } from './const'
import productProgramApis from '@/api/src/productProgram'
import SetSpecialRule from '../SetSpecialRule'
import Detail from '@/components/DetailContainer'
import {PRODUCT_EXCHANGE} from '@/model'
export default {
  name: 'PlanConfig',
  components: { SetSpecialRule, Detail },
  mixins: [tableMixin],
  data () {
    return {
      typeList,
      PRODUCT_EXCHANGE,
      searchForm: {
        name: '',
        exchangeRange: '',
        type: ''
      },
      isShowDetail: false,
      detailID: '',
      specialRuleParams: {
        visible: false
      }
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {},
  methods: {
    async loadList () {
      const _res = await productProgramApis.getPageList(
        this.assignQuery(this.searchForm)
      )
      this.initialTableData(_res.list, _res.count)
    },

    // 新增/编辑
    onEdit (row) {
      this.specialRuleParams = {
        visible: true,
        id: row.id
      }
    },
    // 详情
    onDetail (row) {
      this.isShowDetail = true
      this.detailID = row.id
    },
    // 删除
    onDel (row) {
      this.$confirm('确定删除？将不可恢复', '删除', {
        type: 'warning'
      }).then(async () => {
        await productProgramApis.delete({ id: row.id })
        this.onSearch()
        this.$message.success('操作成功')
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
